import React, { useState, useEffect } from 'react';
import { useStore } from '@/hooks'
import { observer } from 'mobx-react-lite';
import { Timeline, Loading } from '@alifd/next';
import styles from './Logs.module.scss'
import { DATETIMES_TEXT } from '../stores/definitions';

const TimelineItem = Timeline.Item;

const Logs = ({ modal }) => {
  const { show, record } = modal;
  const { orderStore: store } = useStore();
  const [state, setState] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      const res = await store.getLogs({ search: { targetId: record?.id } });
      setState(res);
      setLoading(false);
    })();
  }, []);

  return (
    <>
      <Loading
        visible={loading}
        className={styles.loading}
      >
        <Timeline>
          {state.map(({ ts, title }) => <TimelineItem key={ts} title={title} timeLeft={DATETIMES_TEXT(ts)} />)}
        </Timeline>
      </Loading>
    </>
  );
};

export default observer(Logs);
